<template>
  <!-- 地图容器 -->
  <el-main>
    <div ref="mapDiv" class="map-container"></div>

    <!-- 底图切换按钮 -->
    <div class="basemap-toggle">
      <el-button type="primary" @click="toggleBaseMap">
        {{ baseMapType === 'vector' ? '切换到影像图' : '切换到矢量图' }}
      </el-button>
    </div>

    <!-- 绘制操作工具栏 -->
    <div v-if="operationState.isDrawing" class="drawing-toolbar">
      <el-button type="primary" @click="handleCancelDraw">取消绘制</el-button>
    </div>

    <!-- 地块属性面板 -->
    <el-drawer
      v-model="operationState.showAttributePanel"
      title="地块属性"
      direction="rtl"
      size="30%"
      :before-close="handleCloseAttributePanel"
    >
      <el-form label-width="100px" class="attribute-form">
        <el-form-item label="地块编号">
          <el-input
            v-model="landParcelForm.LandID"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="土地用途">
          <el-select
            v-model="landParcelForm.landUse"
            placeholder="请选择土地用途"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
            @change="handleLandUseChange"
          >
            <el-option label="耕地" value="耕地"></el-option>
            <el-option label="未利用地" value="未利用地"></el-option>
            <el-option label="商业用地" value="商业用地"></el-option>
            <el-option label="工业用地" value="工业用地"></el-option>
            <el-option label="住宅用地" value="住宅用地"></el-option>
            <el-option label="公共设施用地" value="公共设施用地"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="土地类型">
          <el-select
            v-model="landParcelForm.landType"
            placeholder="请选择土地类型"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          >
            <el-option
              v-for="item in landTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所有权类型">
          <el-select
            v-model="landParcelForm.ownershipType"
            placeholder="请选择所有权类型"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          >
            <el-option label="国有" value="国有"></el-option>
            <el-option label="集体" value="集体"></el-option>
            <el-option label="私有" value="私有"></el-option>
            <el-option label="混合所有" value="混合所有"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用权人">
          <el-input
            v-model="landParcelForm.rightHolder"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="使用期限">
          <el-select
            v-model="landParcelForm.expirationDate"
            placeholder="请选择使用期限"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          >
            <el-option label="40年" value="40年"></el-option>
            <el-option label="50年" value="50年"></el-option>
            <el-option label="70年" value="70年"></el-option>
            <el-option label="永久" value="永久"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="获取日期">
          <el-date-picker
            v-model="landParcelForm.acquisitionDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="更新日期">
          <el-date-picker
            v-model="landParcelForm.updateDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="地块状态">
          <el-select
            v-model="landParcelForm.parcelStatus"
            placeholder="请选择地块状态"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          >
            <el-option label="正常" value="正常"></el-option>
            <el-option label="闲置" value="闲置"></el-option>
            <el-option label="待开发" value="待开发"></el-option>
            <el-option label="开发中" value="开发中"></el-option>
            <el-option label="已开发" value="已开发"></el-option>
            <el-option label="争议中" value="争议中"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地块等级">
          <el-select
            v-model="landParcelForm.parcelGrade"
            placeholder="请选择地块等级"
            style="width: 100%"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          >
            <el-option label="一级" value="一级"></el-option>
            <el-option label="二级" value="二级"></el-option>
            <el-option label="三级" value="三级"></el-option>
            <el-option label="四级" value="四级"></el-option>
            <el-option label="五级" value="五级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="landParcelForm.remarks"
            type="textarea"
            :rows="3"
            :disabled="
              operationState.operationType === 'query' || operationState.operationType === 'delete'
            "
          ></el-input>
        </el-form-item>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <!-- 添加操作的按钮 -->
          <template v-if="operationState.operationType === 'add'">
            <el-button type="primary" @click="handleSubmitAdd">提交</el-button>
            <el-button @click="handleCloseAttributePanel">取消</el-button>
          </template>

          <!-- 编辑操作的按钮 -->
          <template v-if="operationState.operationType === 'edit'">
            <el-button type="primary" @click="handleSubmitEdit">保存修改</el-button>
            <el-button @click="handleCloseAttributePanel">取消</el-button>
          </template>

          <!-- 删除操作的按钮 -->
          <template v-if="operationState.operationType === 'delete'">
            <el-button type="danger" @click="handleDeleteLandParcel">确认删除</el-button>
            <el-button @click="handleCloseAttributePanel">取消</el-button>
          </template>

          <!-- 查询操作的按钮 -->
          <template v-if="operationState.operationType === 'query'">
            <el-button type="primary" @click="handleEditLandParcel">编辑</el-button>
            <el-button type="danger" @click="handleDeleteLandParcel">删除</el-button>
            <el-button @click="handleCloseAttributePanel">关闭</el-button>
          </template>
        </div>
      </el-form>
    </el-drawer>
  </el-main>
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from 'vue'
import { useMapView } from '@/utils/MapView'
import '@/assets/styles/map-view.css'
import { useRoute } from 'vue-router'

const route = useRoute()

const {
  mapDiv,
  initMap,
  baseMapType,
  toggleBaseMap,
  // 地块操作相关
  operationState,
  landParcelForm,
  landTypeOptions,
  handleAddLandParcel,
  handleEditLandParcel,
  handleDeleteLandParcel,
  handleCancelDraw,
  handleSubmitAdd,
  handleSubmitEdit,
  handleCloseAttributePanel,
} = useMapView()

// 记录原始土地用途，用于比较变更
const originalLandUse = ref('')

// 处理土地用途变更
const handleLandUseChange = (newValue: string) => {
  // 只在编辑模式下处理变更记录
  if (operationState.operationType === 'edit') {
    // 如果原始值为空，说明是首次加载，记录原始值
    if (!originalLandUse.value && landParcelForm.landUse) {
      originalLandUse.value = landParcelForm.landUse
    }

    // 如果土地用途发生变化，将旧的用途添加到历史记录中
    if (originalLandUse.value && originalLandUse.value !== newValue) {
      // 确保OldUseType是数组
      if (!Array.isArray(landParcelForm.OldUseType)) {
        landParcelForm.OldUseType = []
      }

      // 确保不重复添加相同的用途
      if (!landParcelForm.OldUseType.includes(originalLandUse.value)) {
        landParcelForm.OldUseType.push(originalLandUse.value)
      }

      // 更新原始值为新值
      originalLandUse.value = newValue
    }
  }
}

// 执行操作的函数
const executeOperation = (operation: string | string[] | null) => {
  if (operation === 'add') {
    handleAddLandParcel()
  } else if (operation === 'edit') {
    handleEditLandParcel()
  } else if (operation === 'delete') {
    handleDeleteLandParcel()
  }
}

onMounted(() => {
  initMap()
  // 初始执行操作
  executeOperation(route.query.operation as string | string[] | null)
})

// 监听路由参数变化，即使在同一组件内也能响应操作类型的变化
watch(
  () => route.query.operation,
  (newOperation) => {
    executeOperation(newOperation as string | string[] | null)
  },
)
</script>

<style lang="scss" scoped>
.basemap-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.drawing-toolbar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 50px;
}
</style>
